import 'package:boss/color_constant.dart';
import 'package:boss/provider/binding_provider.dart';
import 'package:boss/provider/login_user_provider.dart';
import 'package:boss/textStyle/text_style.dart';
import 'package:boss/ui/page/binding/binding_page.dart';
import 'package:boss/ui/page/binding/page/bindingReview/binding_review_page.dart';
import 'package:boss/ui/page/pay/payConfiguration/pay_configuration_page.dart';
import 'package:boss/ui/page/pay/payList/pay_list_page.dart';
import 'package:boss/ui/widget/center_title_app_bar.dart';
import 'package:boss/ui/widget/custom_divier.dart';
import 'package:boss/ui/widget/image/base_image.dart';
import 'package:boss/ui/widget/shadow_radius_card.dart';
import 'package:flutter/material.dart';
import 'package:hi_common/hi_common.dart';
import 'package:provider/provider.dart';
import 'package:router/annotation.dart';

@RouterConfig(PayHomePage.pageName)
class PayHomePage extends StatefulWidget {
  static const pageName = '/PayHomePage';

  @override
  _PayHomePageState createState() => _PayHomePageState();
}

class _PayHomePageState extends BaseState<PayHomePage> {
  _PayHomePageState() : super(PayHomePage.pageName);

  final List<_ModuleData> modules = [
    _ModuleData('支付进件', 'assets/image/pay_home_msg.png', PayConfigurationPage.pageName),
    _ModuleData('收款码', 'assets/image/pay_home_qr.png', PayListPage.pageName),
    _ModuleData('收款账户', 'assets/image/pay_home_account.png', BindingPage.pageName),
  ];

  @override
  Widget build(BuildContext context) {
    final radioCircular = Radius.circular(15.w);
    return Scaffold(
      appBar: CenterTitleAppBar(title: '移动支付'),
      body: SingleChildScrollView(
        padding: EdgeInsets.symmetric(horizontal: 20.w),
        child: Column(
          children: [
            ShadowRadiusCard(
              padding: EdgeInsets.symmetric(horizontal: 20.w),
              margin: EdgeInsets.only(top: 30.w),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    height: 100.w,
                    child: Row(
                      children: [
                        BaseImage('assets/image/pay_home_store.png', width: 44.w, height: 44.w),
                        Container(
                          margin: EdgeInsets.symmetric(horizontal: 10.w),
                          child: Selector<LoginUserProvider, String>(
                            selector: (context, provider) => provider.loginUser.storeName,
                            builder: (context, storeName, _) {
                              return Text(
                                storeName,
                                style: TextStyleConstant().normal_1_34.copyWith(fontWeight: FontWeight.w500),
                              );
                            },
                          ),
                        ),
                        Container(
                          transform: Matrix4.translationValues(0, -15.w, 0),
                          padding: EdgeInsets.symmetric(horizontal: 15.w),
                          height: 30.w,
                          decoration: BoxDecoration(
                            color: ColorConstant.ff5770f6.withOpacity(0.1),
                            borderRadius: BorderRadius.only(
                              topLeft: radioCircular,
                              topRight: radioCircular,
                              bottomRight: radioCircular,
                            ),
                          ),
                          child: Text('当前门店', style: TextStyleConstant().blue_20),
                        ),
                      ],
                    ),
                  ),
                  CustomDivider(),
                  Container(
                    margin: EdgeInsets.all(30.w),
                    child: Text('功能入口', style: TextStyleConstant().normal_1_24.copyWith(fontWeight: FontWeight.w500)),
                  ),
                  GridView.builder(
                    padding: EdgeInsets.symmetric(horizontal: 20.w),
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4, mainAxisSpacing: 30.w),
                    itemBuilder: (context, index) {
                      final current = modules[index];
                      return _ModuleItem(
                        current,
                        onTap: () => nav(current.url),
                      );
                    },
                    itemCount: modules.length,
                    shrinkWrap: true,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  nav(String url) async {
    if (url == BindingPage.pageName) {
      final bindingProvider = Provider.of<BindingProvider>(context, listen: false);
      await bindingProvider.initData();

      if (bindingProvider.payInfoForm.id == null) {
        Navigator.pushNamed(GlobalPageContext.instance.context, BindingPage.pageName);
      } else {
        Navigator.pushNamed(GlobalPageContext.instance.context, BindingReviewPage.pageName);
      }

      return;
    }
    Navigator.pushNamed(context, url);
  }
}

class _ModuleItem extends StatelessWidget {
  final _ModuleData data;
  final VoidCallback onTap;

  const _ModuleItem(this.data, {this.onTap, Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      behavior: HitTestBehavior.translucent,
      child: Column(
        children: [
          BaseImage(data.icon, width: 100.w, height: 100.w),
          Container(
            margin: EdgeInsets.only(top: 10.w),
            child: Text(data.title, style: TextStyleConstant().normal_1_22.copyWith(fontWeight: FontWeight.w500)),
          ),
        ],
      ),
    );
  }
}

class _ModuleData {
  String title;
  String icon;
  String url;

  _ModuleData(this.title, this.icon, this.url);
}
